<div [@routerTransition]>
    <h1>课程列表</h1>
    <div class="row">
        <div class="col-md-12">
            <button data-toggle="modal" class="btn btn-primary pull-right btn-sm" (click)="createClassGroup()">
              <i class="fa fa-plus"></i>
              新增课程
            </button>
            <table class="table table-striped table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>*</td>
                        <th>名称</th>
                        <th>课时</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-template [ngIf]="classGroups && classGroups.items">
                        <ng-template ngFor let-classGroup [ngForOf]="classGroups.items">
                            <tr>
                                <td>{{classGroup.id}}</td>
                                <td>
                                    <div class="thumbnail">
                                        <img *ngIf="classGroup.avatarId" [src]="downloadUrl+classGroup.avatarId" alt="">
                                        <img *ngIf="!classGroup.avatarId" src="../../../assets/app-logo-small.png" alt="">
                                    </div>
                                </td>
                                <td><a>{{classGroup.groupName}}</a></td>
                                <td>{{classGroup.classCount}}</td>
                                <td>{{classGroup.period}}</td>
                                <td>
                                    <a class="btn btn-primary btn-sm" role="button" (click)="createClassGroup(classGroup.id)">修改</a>
                                    <a class="btn btn-primary btn-sm" role="button" (click)="deleteGroup(classGroup.id)">删除</a>
                                    <a class="btn btn-primary btn-sm" role="button" (click)="addClass(classGroup.id)">添加课时</a>
                                    <a class="btn btn-primary btn-sm" role="button" (click)="expandClassGroup(classGroup.id)">{{expendGroupId === classGroup.id?"收起":"展开"}}</a>
                                </td>
                            </tr>
                            <ng-template [ngIf]="classes && classes.items && expendGroupId === classGroup.id ">
                                <ng-template ngFor let-i="index" let-class [ngForOf]="classes.items">
                                    <tr>
                                        <td>&gt; {{i+1}}</td>
                                        <td>
                                            <div class="thumbnail micro-class">
                                                <img *ngIf="class.avatarId" [src]="downloadUrl+class.avatarId" alt="">
                                                <img *ngIf="!class.avatarId" src="../../../assets/app-logo-small.png" alt="">
                                            </div>
                                        </td>
                                        <td><a>{{class.title}}</a></td>
                                        <td>--</td>
                                        <td>{{class.classTime|date:'yyyy-MM-dd' }}</td>
                                        <td>
                                            <a class="btn btn-primary btn-sm" role="button" (click)="modifyClass(classGroup.id,class.id)">修改</a>
                                            <a class="btn btn-primary btn-sm" role="button" (click)="deleteClass(class.id)">删除</a>
                                        </td>
                                    </tr>
                                </ng-template>
                            </ng-template>
                        </ng-template>
                    </ng-template>
                </tbody>
            </table>
        </div>
    </div>
</div>
<class-group-add #createClassGroupModal (modalSave)="getClassGroups()"></class-group-add>
<micro-class-add #createMicroClassModal (modalSave)="getClasses()"></micro-class-add>